<template>
  <el-row class="product-info box-bg">
    <TitleLable :label="current ? '项目情况' : '投资预算完成率'">
      <template #right>
        <Tabs :list="navList" :current="current" @change="change" />
      </template>
    </TitleLable>
    <!-- 本年 -->
    <CurrentYear v-if="current === 0" />
    <!-- 历年 -->
    <CalendarYear v-else />
  </el-row>
</template>

<script>
import TitleLable from "../TitleLable/index.vue";
import Tabs from "../Tabs/index.vue";
import CurrentYear from "./CurrentYear.vue";
import CalendarYear from "./CalendarYear.vue";

export default {
  name: "ProductInfo",
  components: { TitleLable, Tabs, CurrentYear, CalendarYear },
  data() {
    return {
      current: 0,
      navList: ["本年", "历年"],
    };
  },
  mounted() {},
  methods: {
    change(val) {
      if (val === this.current) return;
      this.current = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.product-info {
  height: 335px;
}
</style>
